<template>
  <!--材料价格查询-->
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24" class="small-search">
          <a-col :xl="6" :lg="8" :md="8" :sm="24" style="margin-bottom: -8px">
            <a-form-item label="课程" :wrapperCol="wrapperCol" :labelCol="labelCol">
              <a-select v-model="courseId" placeholder="请选择课程">
                <a-select-option v-for="(item, inx) in this.courseList" :key="inx" :value="item.id">
                  {{ item.courseName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :xl="10" :lg="14" :md="16" :sm="24">
            <a-form-item label="所属日期">
              <a-date-picker
                placeholder="请选择开始日期"
                class="query-group-cust"
                value-format="yyyy-MM-dd"
                @change="onBirthdayChange"
              ></a-date-picker>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left; overflow: hidden; margin: 2px 4px" class="table-page-search-submitButtons">
              <!-- <a-button type="primary" @click="handleExportXls30('PurchaseStatistics')">导出到excel</a-button> -->
              <a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 8px">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->
 <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button type="primary" icon="download" @click="handleExportXls('scoreForm')">导出</a-button>
    </div>
    <!-- table区域-begin -->
    <div>
      <div class="date-totals">
        <p>
          <span>阶段数据：</span>
          <span>最高分：{{ this.maxScore }}</span>
          <span>最低分：{{ this.minScore }}</span>
          <span>平均分：{{ this.avgScore }}</span>
        </p>
      </div>
      <a-table
        ref="table"
        size="middle"
        bordered
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        :pagination="ipagination"
        class="grandForm-table"
        @change="handleTableChange"
      >
        <span slot="action" slot-scope="text, record">
          <a @click="open(record)">成绩详情</a>
        </span>
      </a-table>
    </div>
    <grand-list ref="modalForm" @ok="modalFormOk"> </grand-list>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { httpAction, getAction } from '@/api/manage'
import GrandList from './modules/GrandList'
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
import { axios } from '@/utils/request'

export default {
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    GrandList,
  },
  data() {
    return {
      dateFormat: 'YYYY-MM-DD',
      examTime: '',
      courseId: '',
      description: '',
      courseList: [],
      maxScore: '',
      minScore: '',
      avgScore: '',

      value: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      modalWidth: 1000,
      // 表头
      columns: [],
      url: {
        courseURL: '/grand/course/list',
        list: '/grandForm/list',
        export: '/grandForm/export',
      },
    }
  },
  created() {
    this.getCourseList()
  },

  computed: {},
  methods: {
    //开始时间
    onBirthdayChange(value, dateString) {
      this.examTime = dateString
    },

    getCourseList() {
      console.log('函数调用' + this.url.courseURL)
      getAction(this.url.courseURL).then((res) => {
        if (res.code == 200) {
          console.log('111' + res.result.records)
          this.courseList = res.result.records
        }
      })
    },
    //重置搜索
    searchReset() {
      this.queryParam = {}
      this.loadData1(1)
    },
    //搜索
    searchQuery() {
      if (this.courseId == '' || this.examTime == '') {
        console
        alert('请选择课程和考试时间！')
        return
      }

      this.loadData1(1)
      console.log(this.maxScore)
      console.log(this.minScore)
      console.log(this.avgScore)
    },
    open(record) {
      console.info("课程："+record.workNo+record.courseId)
      // console.log('111' + dataSource)
      // console.log('l' + maxScore)
      // console.log('l' + minScore)
      // console.log('l' + avgScore)
      this.$refs.modalForm.getParams(record)
      this.$refs.modalForm.title = '考试状况'
      this.$refs.modalForm.disableSubmit = true
    },

    loadData1() {
      getAction(this.url.list, {
        courseId: this.courseId,
        examTime: this.examTime,
      }).then((res) => {
        if (res.success) {
          this.total = ''
          if (res.result.length == 0) {
            this.dataSource = res.result.records ? res.result.records : res.result.length > 0 ? res.result : []
          } else {
            this.columns = [
              {
                title: '成绩单',
                align: 'center',
                children: [
                  {
                    title: '序号',
                    dataIndex: '',
                    key: 'rowIndex',
                    align: 'center',
                    width: 60,
                    customRender(text, record, index) {
                      return parseInt(index) + 1
                    },
                  },
                  {
                    title: '学号',
                    align: 'center',
                    dataIndex: 'workNo',
                    ellipsis: true,
                  },
                  {
                    title: '姓名',
                    align: 'center',
                    dataIndex: 'name',
                    ellipsis: true,
                  },
                  {
                    title: '成绩',
                    dataIndex: 'score',
                    align: 'center',
                    ellipsis: true,
                  },
                  {
                    title: '操作',
                    dataIndex: 'action',
                    align: 'center',
                    fixed: 'right',
                    width: 147,
                    scopedSlots: { customRender: 'action' },
                  },
                ],
              },
            ]
            this.dataSource = res.result.grandList
            this.maxScore = res.result.maxScore
            this.minScore = res.result.minScore
            this.avgScore = res.result.avgScore
            // this.open(
            //   // res.result.grandList,
            //   // res.result.maxScore,
            //   // res.result.minScore,
            //   // res.result.avgScore,
            //   this.courseId,
            //   this.examTime
            // )
          }
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    initDictConfig() {},
    handleExportXls(fileName) {
      if (!fileName || typeof fileName != 'string') {
        fileName = '导出文件'
      }
      let param = { courseId: this.courseId, examTime: this.examTime }
      console.log('导出参数', param)
    //  getAction(this.url.export,{courseId: this.courseId, examTime: this.examTime,
    //     responseType: 'blob'})
      axios({
        url: this.url.export,
        params: param,
        method: 'get',
        responseType: 'blob',
      }).then((data) => {
        if (!data) {
          this.$message.warning('文件下载失败')
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
        } else {
          let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', fileName + '.xls')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link) //下载完成移除元素
          window.URL.revokeObjectURL(url) //释放掉blob对象
        }
      })
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
<style lang="less" scoped>
//合计行样式
.date-totals {
  font-size: 17px;
  font-weight: 600;
  margin: 0 20px;
  margin-bottom: -4px;
  margin-top: 2px;
  span:not(:first-child) {
    margin-right: 20px;
  }
}
//搜索区域缩小
/deep/ .small-search {
  .ant-col .ant-form-item {
    margin-bottom: 6px;
  }
}
// /deep/ .ant-table-scroll .ant-table-fixed .ant-table-thead{
// position: relative;
// }
// /deep/ body{
//   ::-webkit-scrollbar {
//     position: absolute;
//     top: 0;
//     width: 8px;
//     height: 8px;
// }

// ::-webkit-scrollbar-corner {
//     background: #f82b2b;
// }
// ::-webkit-scrollbar-thumb {
//     background: #292828;
//     border-radius: 2px;
// }
// ::-webkit-scrollbar-track {
//     background: #f6f6f6;
//     border-radius: 2px;
// }
// }
</style>



